﻿@page "/docs/extensions/datagrid/columns"

<Seo Canonical="/docs/extensions/datagrid/columns" Title="Blazorise DataGrid Columns" Description="Learn to use and work with the Blazorise DataGrid Columns to customize and configure the columns in a data grid." />

<DocsPageTitle>
    Blazorise DataGrid: Columns
</DocsPageTitle>

<DocsPageLead>
    DataGrid provides many types of columns. You can use built-in columns such as text, numeric, date, checkbox, select, etc to automatically create specialized content.
</DocsPageLead>

<DocsPageSection>
    <DocsPageSectionHeader Title="Default Column">
        Default column template for text values. In this example, we are using the default column template for the <Code>Employee.Email</Code> property.
    </DocsPageSectionHeader>

    <DocsPageSectionContent FullWidth>
        <DataGridColumnExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridColumnExample" />
</DocsPageSection>


<DocsPageSection>
    <DocsPageSectionHeader Title="Check Column">
        Column template for boolean values
    </DocsPageSectionHeader>

    <DocsPageSectionContent FullWidth>
        <DataGridCheckColumnExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridCheckColumnExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Date Column">
        Column template for datetime values
    </DocsPageSectionHeader>

    <DocsPageSectionContent FullWidth>
        <DataGridDateColumnExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridDateColumnExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Date Column with Native Mode">
        Column template for datetime values. Set NativeInputMode if you prefer to use the native html input variant of the date input.
    </DocsPageSectionHeader>

    <DocsPageSectionContent FullWidth>
        <DataGridDateColumnNativeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridDateColumnNativeExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Numeric Column">
        Column template for numeric values
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth>
        <DataGridNumericColumnExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridNumericColumnExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Numeric Column with Native Mode">
        Column template for numeric values. Set NativeInputMode if you prefer to use the native html input variant of the numeric input.
    </DocsPageSectionHeader>

    <DocsPageSectionContent FullWidth>
        <DataGridNumericColumnNativeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridNumericColumnNativeExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Select Column">
        Column template for selectable values
    </DocsPageSectionHeader>

    <DocsPageSectionContent FullWidth>
        <DataGridSelectColumnExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridSelectColumnExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Select Column Multiple">
        Column template for selectable values. Allow multiple values support by setting Multiple to true. Bind a string or value type array.
    </DocsPageSectionHeader>

    <DocsPageSectionContent FullWidth>
        <DataGridSelectColumnMultipleExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridSelectColumnMultipleExample" />
</DocsPageSection>

<DocsPageApi>
    <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
</DocsPageApi>